<template>
  <div style="width: 85vw; height: 85vh; overflow: hidden; display: flex; margin-left: 0">
    <div style="flex: 1">
      <el-image style="width: 100%; height: 100%; margin-left: 0" src="http://www.zuef.zju.edu.cn/ueditor/php/upload/image/20221010/1665379219742024.jpg"></el-image>
    </div>
    <div style="width: 35%; background-color: white">
      <div style="text-align: center; margin: 0 20px">
        <div style="margin-top: 150px">
          <div style="font-size: 25px">登录</div>
          <div style="font-size: 14px; color: gray; margin-top: 10px">
            请输入用户名和密码进行登录
          </div>
        </div>
        <div style="margin-top: 40px">
          <el-input
              type="text"
              placeholder="用户名"
              v-model="userLogInfo.account"
              maxlength="20"
              clearable>
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
          <el-input
              type="password"
              placeholder="密码"
              style="margin-top: 10px"
              v-model="userLogInfo.password"
              maxlength="20"
              clearable
              show-password>
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </div>
        <el-row style="margin-top: 5px">
          <el-col :span="12" style="text-align: left">
            <el-checkbox label="记住我"></el-checkbox>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-link>忘记密码？</el-link>
          </el-col>
        </el-row>
        <div style="margin-top: 30px">
          <el-button @click="userLogIn" style="width: 90%" type="success" plain>立即登录</el-button>
        </div>
        <el-divider>
          <span style="color: grey">没有账号</span>
        </el-divider>
        <div>
          <el-button @click="jumpToSignIn" style="width: 90%" type="warning" plain>注册账号</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {View, Hide} from "@element-plus/icons-vue";

export default {
  data() {
    return {
      passFlag: ref(false),//输入框类型标识
      addPassFlag: ref(false),//图标显示标识
      userLogInfo: {
        id: "",
        account: "",
        password: "",
      }
    }
  },
  computed: {

  },
  methods: {
    userLogIn() {
      axios.post('/user/login/',
          {
            account: this.userLogInfo.account,
            password: this.userLogInfo.password,
          })
          .then(response => {
            ElMessage.success("登录成功")
            this.userLogInfo.id = response.data.id
            sessionStorage.setItem('user_id', this.userLogInfo.id)
            window.location.href = "/app"
          })
          .catch(error => {
            ElMessage.error("登录失败")
            console.log(error)
            this.userLogInfo.password = ""
          })
    },
    jumpToSignIn() {
      window.location.href = "/signin"
    }
  },
}

</script>

<style scoped>

</style>